import './App.css';
import { route } from './route/route';
import { useLocation, useNavigate, useRoutes } from "react-router-dom";
import { Tabbar } from 'react-vant'
import { HomeO, LabelO, AppsO, CartO, Contact } from '@react-vant/icons'
function App() {
  const arr =['/home','/topic','/category','/car','/my']
  let navigate = useNavigate()
  let location = useLocation()
  const tabs = [
    {
      name:'/home',
      icon:<HomeO fontSize='20px' />,
      title:'首页'
    },
    {
      name:'/topic',
      icon:<LabelO fontSize='20px'  />,
      title:'专题'
    },
    {
      name:'/category',
      icon:<AppsO fontSize='20px'  />,
      title:'分类'
    },
    {
      name:'/car',
      icon:<CartO fontSize='20px'  />,
      title:'购物车'
    },
    {
      name:'/my',
      icon:<Contact fontSize='20px'  />,
      title:'我的'
    }
  ]
  const tz = (value) => {
    navigate(value)
  }
  // console.log(location.pathname);
  return (
    <div className="App">
      {useRoutes(route)}
      {arr.indexOf(location.pathname) != -1 && <Tabbar value={location.pathname} defaultValue={location.pathname} className='nav-box'>
        {
          tabs.map(item => {
            return <Tabbar.Item key={item.name} onClick={() => tz(item.name)} className='nav-item' name={item.name} icon={item.icon}>{item.title}</Tabbar.Item>
          })
        }
      </Tabbar>}
    </div>
  );
}

export default App;
